<template>
	<view class="flex text-center justify-between px-8">
		<template v-for="(tab, index) in tabs">
			<view
			:class="['border-box','flex-1','h-_160','py-4', 'flex', 'flex-column', {
				active: index === active,
				'text-primary': index === active,
				}]"
			@tap="$emit('change', index)"
			>
				<view :class="['tab-item flex flex-column justify-between', {'tab-item--last': index + 1 === tabs.length}]">
					<view class="flex-1 flex item-center justify-center">
						<u-image width="40" height="40" :src="index === active ? tab.image.active : tab.image.normal"></u-image>
					</view>
					<view class="text-sm">{{tab.label}}</view>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	export default {
		name: 'CommonTabs',
		props: ['active', 'tabs'],
	}
</script>

<style scoped>
	.tab-item {
		height: 100%;
		border-right: 2rpx solid #e6e6e6;
	}
	.tab-item--last {
		border-right: 0 none;
	}
	.active {
		border-bottom: 4rpx solid #55c7fb;
	}
</style>